<style scoped>
.container{
  /* margin: 30px auto 0px; */
  padding: 16px;
  /* width: 700px; */
  border: 1px solid #EFEFEF;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 标题导航栏 -->
    <!-- <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>&nbsp;&nbsp;预警控制参数
        </el-breadcrumb-item> 
        <el-breadcrumb-item>详细信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <!-- 标题导航栏END -->
    <!-- 主体区 -->
    <div class="container" >
      <!-- 表单区 -->
      <div class="form-data-box">
        <el-form :model="formBean" :rules="validateRules" ref="form1" label-width="250px" class="ruleForm">
            <el-row> 
                <el-col :span="24">
                    <el-form-item label="系统采样间隔（分钟）" prop="delay"> 
                        <el-input  :readonly=readOnly  v-model="formBean.delay"></el-input> 
                    </el-form-item> 
                </el-col>
                <el-col :span="24">
                    <el-form-item label="CPU告警值（%）" prop="cpu"> 
                        <el-input  :readonly=readOnly  v-model="formBean.cpu"></el-input> 
                    </el-form-item> 
                </el-col>
            </el-row>
            <el-row> 
                <el-col :span="24">
                    <el-form-item label="硬盘告警值（%）" prop="disk"> 
                        <el-input  :readonly=readOnly  v-model="formBean.disk"></el-input> 
                    </el-form-item> 
                </el-col>
                <el-col :span="24">
                    <el-form-item label="内存告警值（%）" prop="mem"> 
                        <el-input  :readonly=readOnly  v-model="formBean.mem"></el-input> 
                    </el-form-item> 
                </el-col>
            </el-row>
            <el-row> 
                <el-col :span="24">
                    <el-form-item label="警告接受邮箱" prop="email"> 
                        <el-input  :readonly=readOnly  v-model="formBean.email"></el-input> 
                    </el-form-item> 
                </el-col> 
            </el-row>

        </el-form>
      </div>
      <!-- 表单区END -->
      <!-- 按钮操作区 -->
      <span slot="footer" class="form-btn-box">
        <el-button v-if="!readOnly" @click="resetForm('form1')">重 置</el-button>
        <el-button v-if="!readOnly" type="primary" @click="submitForm('form1')" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
        <el-button @click="cnacelForm('form1')">取 消</el-button>
      </span>
      <!-- 按钮操作区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>

<script>
import { validateMobile } from "common/validate";
export default {
  data() {
    return {
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      // 新增表单信息
      formBean: {
        id:'',//id
        delay:'',//系统采样间隔（分钟）
        cpu:'',//CPU告警值（%）
        disk:'',//硬盘告警值（%）
        mem:'',//内存告警值（%）
        email:'',//警告接受邮箱
        createtime:'' //创建时间

      },
      // 表单校验规则
      validateRules: {
        id: [{ required:true, message: '请输入id', trigger: 'blur' }],
            delay: [{ required:true, message: '请输入系统采样间隔（分钟）', trigger: 'blur' }],
            cpu: [{ required:true, message: '请输入CPU告警值（%）', trigger: 'blur' }],
            disk: [{ required:true, message: '请输入硬盘告警值（%）', trigger: 'blur' }],
            mem: [{ required:true, message: '请输入内存告警值（%）', trigger: 'blur' }],
            email: [{ required:true, message: '请输入警告接受邮箱', trigger: 'blur' }],
            createtime: [{ required:false, message: '请输入创建时间', trigger: 'blur' }]

      },
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "",
      // 表单只读状态
      readOnly: false,
      readOnlyEdt: false,
      //字典集
      dicts: {},
    };
  },
  // 进入页面加载数据
  //activated() {
  //  this.handleInitLoad();
  //},
  //弹出窗口模式
  props: {
    sourceData: {
      required: true
    }
  },
  mounted() {
    this.handleInitLoad();
  },

  methods: {
    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      //this.loadSelectOptoins("certype",null);
      //this.loadCascadeOptions("equtype2",null);
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      this.$dicts
        .loadDict(this.httpRoot.BASEURL_TSM, params, dictKind)
        .then(res => {
          this.$set(this.dicts, dictKind, res);
        });
    },

    /**
     * 通用定义:级联下拉字典
     *  @augments dictKind 字典类型
     *  @augments valu 初始值
     */
    loadCascadeOptions(dictKind, params, valu) {
      this.$dicts
        .loadCascade(this.httpRoot.BASEURL_TSM, params, dictKind)
        .then(res => {
          this.$set(this.cascaders, dictKind, res);
          setTimeout(() => {
            let option = this.$dicts.resetCascadeValue(
              this.cascaders,
              dictKind,
              valu
            );
            this.$set(this.cascaderSelected, dictKind, option);
          }, 1000);
        });
    },

    /**
     *  级联字典事件
     */
    handleCascadeChange(value) {
      //this.formBean.equtype = value[value.length - 1];
    },

    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      //this.initSelectOptoins();
      this.initFormData();
    },

    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      //this.$refs[formName].resetFields();
      //this.$router.push({
      //  name: "ctrlparamsList",
      //  params: {
      //    type: "cancel"
      //  }
      //});
      //弹出窗口模式
      this.$emit("cancel", {});
    },
    /**
     * 重置表单
     * @augments formName 表单名称
     */
    resetForm(formName) {
      this.formBean = JSON.parse(this.firstLoadedData);
    },
    /**
     *初始化加载表单数据
     */
    initFormData() {
      //this.selectedId = this.$route.query.seleid;
      //this.actType = this.$route.query.actType;
      //弹出窗口参数
      this.selectedId = this.sourceData.seleid;
      this.actType = this.sourceData.actType;
      //
      this.readOnlyEdt = true;
      if (this.actType == "view") {
        // 查看状态 标识表单只读
        this.readOnly = true;
      } else if (this.actType == "add") {
        this.readOnly = false;
        this.readOnlyEdt = false;
        //清空修改保存之后数据还存在的情况
        for(var key in this.formBean){
          this.formBean[key] = '';
        }
      } else {
        this.readOnly = false;
      }
      var url = this.httpRoot.BASEURL_TSM + "rest/tsm/sys/ctrlparams/";
      if (this.actType != null && this.actType.length > 0) {
        url += "to" + this.actType;
      }
      //查询参数
      var paramQuery = {
        loginsid: this.$util.getLoginer().sessionId,
        id: this.selectedId
      };
      if (this.actType == "add") {
        //this.formBean.type = "2";
        //this.formBean.state = "1";
      } else {
        this.$axios
          .get(url, {
            params: paramQuery
          })
          .then(res => {
            this.formBean = {};
            if (res.data.result == "true") {
              this.formBean = res.data.resultData;
              this.firstLoadedData = JSON.stringify(this.formBean);
              //
            } else {
              this.$error(
                "初始数据加载失败:" +
                  res.data.resultMessage +
                  ",错误代码:" +
                  res.data.resultCode
              );
            }
          })
          .catch(function(error) {});
      }
    },

    /**
     * 提交表单
     * @augments formName 表单名称
     */
    submitForm(formName) {
      //
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 表单校验成功
          if (this.actType == "add" || this.actType == "upd") {
            var url = this.httpRoot.BASEURL_TSM + "rest/tsm/sys/ctrlparams/";
            url +=
              this.actType +
              "save" +
              "?loginsid=" +
              this.$util.getLoginer().sessionId;
            //
            // 开启提交表单的loading
            this.fullscreenLoading = true;
            this.$axios
              .post(url, this.formBean)
              .then(res => {
                // 关闭提交表单的loading
                this.fullscreenLoading = false;
                if (res.data.result == "true") {
                  this.$message({
                    message: "数据保存成功.",
                    type: "success"
                  });
                  //this.$router.push({
                  //  path: "/ctrlparamsList"
                  //});
                  //弹出窗口模式
                  this.$emit("ok", {});
                } else {
                  this.$error(
                    "数据保存失败:" +
                      res.data.resultMessage +
                      ",错误代码:" +
                      res.data.resultCode
                  );
                }
              })
              .catch(function(error) {
                this.fullscreenLoading = false;
              });
          }
        } else {
          // 表单校验失败
          // this.$error("数据校验失败.");
        }
      });
    }
  }
};
</script>
